<template>
  <el-drawer
    size="700"
    v-model="dialogVisibled"
    :before-close="handleClose"
    :with-header="false"
    :close-on-click-modal="false"
    @open="handleDialogOpen"
  >
    <div style="margin: 10px 10px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="待审批" name="waitApproval">
          <el-collapse expand-icon-position="left">
            <el-collapse-item
              icon="CaretRight"
              v-for="item in flowMessage.filter((f: { IsHandled: any; })=>f.IsHandled ===false)"
              :title="item.MessageTitle"
              :name="item.MessageId"
            >
              <template #title>
                <el-text
                  v-if="item.MessageState === MessageStateEnum.SoonExpire"
                  type="warning"
                  >{{ item.MessageTitle }}</el-text
                >
                <el-text
                  v-if="item.MessageState === MessageStateEnum.Expired"
                  type="danger"
                  >{{ item.MessageTitle }}</el-text
                >
                <el-button
                  size="small"
                  type="text"
                  @click.stop="GoApprovalClick"
                  style="float: right; margin-top: 10px"
                >
                  <el-icon><SuccessFilled /></el-icon> 去审批
                </el-button>
              </template>
              <div style="text-align: left; margin-left: 20px">
                <div>
                  <label style="font-weight: 700">提示信息：</label>
                  {{ item.MessageContent }}
                </div>
                <div style="margin-top: 5px">
                  <label style="font-weight: 700">是否处理：</label>
                  <span v-if="item.IsHandled">已处理</span>
                  <span v-else>未处理</span>
                </div>
                <div style="margin-top: 5px">
                  <label style="font-weight: 700">处理时间：</label>
                  {{ item.HandledTime }}
                </div>
                <div style="margin-top: 5px">
                  <label style="font-weight: 700">处理类型：</label>
                  <span v-if="item.HandledType === HandledTypeEnum.SystemApproval"
                    >系统自动处理</span
                  >
                  <span v-else>手动审批</span>
                </div>
                <div style="margin-top: 5px">
                  <label style="font-weight: 700">处理结果：</label>
                  <span v-if="item.HandledState === FlowNodeStateEnum.AuditDismissal"
                    >审核驳回</span
                  >
                  <span v-if="item.HandledState === FlowNodeStateEnum.AuditPass"
                    >审核通过</span
                  >
                  <span v-if="item.HandledState === FlowNodeStateEnum.AuditRefuse"
                    >审核拒绝</span
                  >
                  <span v-if="item.HandledState === FlowNodeStateEnum.Filing">归档</span>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="已审批" name="auditedApproval">
          <el-collapse expand-icon-position="left">
            <el-collapse-item
              icon="CaretRight"
              v-for="item in flowMessage.filter((f: {MessageState: MessageStateEnum; IsHandled: any; })=>f.IsHandled && f.MessageState===MessageStateEnum.Expired)"
              :title="item.MessageTitle"
              :name="item.MessageId"
            >
              <template #title>
                <el-text
                  v-if="item.MessageState === MessageStateEnum.SoonExpire"
                  type="warning"
                  >{{ item.MessageTitle }}</el-text
                >
                <el-text
                  v-if="item.MessageState === MessageStateEnum.Expired"
                  type="danger"
                  >{{ item.MessageTitle }}</el-text
                >
              </template>
              <div style="text-align: left; margin-left: 20px">
                <div>
                  <label style="font-weight: 700">提示信息：</label>
                  {{ item.MessageContent }}
                </div>
                <div style="margin-top: 5px">
                  <label style="font-weight: 700">是否处理：</label>
                  <span v-if="item.IsHandled">已处理</span>
                  <span v-else>未处理</span>
                </div>
                <div style="margin-top: 5px">
                  <label style="font-weight: 700">处理时间：</label>
                  {{ item.HandledTime }}
                </div>
                <div style="margin-top: 5px">
                  <label style="font-weight: 700">处理类型：</label>
                  <span v-if="item.HandledType === HandledTypeEnum.SystemApproval"
                    >系统自动处理</span
                  >
                  <span v-else>手动审批</span>
                </div>
                <div style="margin-top: 5px">
                  <label style="font-weight: 700">处理结果：</label>
                  <span v-if="item.HandledState === FlowNodeStateEnum.AuditDismissal"
                    >审核驳回</span
                  >
                  <span v-if="item.HandledState === FlowNodeStateEnum.AuditPass"
                    >审核通过</span
                  >
                  <span v-if="item.HandledState === FlowNodeStateEnum.AuditRefuse"
                    >审核拒绝</span
                  >
                  <span v-if="item.HandledState === FlowNodeStateEnum.Filing">归档</span>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <el-button icon="Close" size="large" type="danger" plain @click="handleClose"
        >取消</el-button
      >
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { FlowNodeStateEnum } from "@/enum/flowEnum";
import { MessageStateEnum, HandledTypeEnum } from "@/enum/flowMessageEnum";
import { computed, ref } from "vue";

const props = defineProps({
  isVisibles: { type: Boolean, required: true },
  dialogTitle: { type: String, required: true },
  flowMessage: { type: Object, required: true },
});
//打开时加载
const flowMessage = ref<any>([]);
const activeName = ref<string>("waitApproval");
const handleDialogOpen = function () {
  activeName.value = "waitApproval";
  flowMessage.value = props.flowMessage;
};
const emit = defineEmits(["closeBnt", "goApprovalBnt"]);

//去审批事件
function GoApprovalClick() {
  emit("goApprovalBnt");
}

//是否显示dialog
const dialogVisibled = computed(() => {
  return props.isVisibles;
});
//关闭事件
const handleClose = () => {
  emit("closeBnt");
};
</script>
<style lang="css" scoped>
/* :deep(.el-collapse-item__title) {
  color: blue;
} */
</style>
